window.onresize = function() {resize();}

window.onload = function () {setsize(); setupdrop()}

var origionalHTML;
var newHTML = "<li><a href=\"../../home/index.html\">Home</a></li>";
var nav;

var irrigation;
var lakes;
var other;

/* The mode for each of the categories. The mode will be 1 if the category has been opened */
var irrigationmode = 0;
var lakesmode = 0;
var othermode = 0;

var headerStatus = 1;
var contentStatus = 1;

function resize() {
    console.log("Resize");
    var x = window.innerWidth;
    if (x <= 1150) {
        /* If it is a skinny window (Around 720p) */
	if (headerStatus == 1) {
	    nav.innerHTML = "<li>" + newHTML + "</li>";
	    headerStatus = 0;
	}
    } else {
	if (headerStatus == 0) {
	    console.log("BIG");
            /* If it is a wide window (Around 1080p) */
	    nav.innerHTML = origionalHTML;
	    irrigation = document.getElementById("irrigation");
	    lakes = document.getElementById("lakes");
	    other = document.getElementById("other");
	    
	    irrigation.addEventListener("click", function() {irrigationmode = accordion(irrigation, irrigationmode, 2);});
	    lakes.addEventListener("click", function() {lakesmode = accordion(lakes, lakesmode, 2);});
	    other.addEventListener("click", function() {othermode = accordion(other, othermode, 4);});
	    headerStatus = 1;
	}
    }

    /* ====================== Content ================== */
    if (x <= 1620) {
	if (contentStatus == 1) {
	    console.log("small");	    
	    /* Make things compact */
	    var content = document.getElementById("content");
	    var body = document.getElementById("body");
	    var i = 1;
	    
	    for (i = 1; i < content.children.length; i++) {
		content.children[i].style.float = "none";
	    }
	    
	    content.style.width = "400px";
	    body.style.minHeight = "1550px";
	    contentStatus = 0;
	}
    } else {
	if (contentStatus == 0) {
	    console.log("Big2");
	    /* Make things wide */
	    var content = document.getElementById("content");
	    var body = document.getElementById("body");
	    var i;

	    for (i = 1; i < content.children.length; i++) {
		if (i % 2 == 0) {
		    content.children[i].style.float = "right";
		} else {
		    content.children[i].style.float = "left";
		}
	    }
	    
	    content.style.width = "60%";
	    body.style.minHeight = "900px";	    
	    contentStatus = 1;
	}    
    }


    return;
}


function setsize() {
    nav = document.getElementById("navigation");
    var home = document.getElementById("home");
    newHTML = home.innerHTML;
    origionalHTML = nav.innerHTML;
    resize();
}



/* ============================== */


function setupdrop () {
    irrigation = document.getElementById("irrigation");
    lakes = document.getElementById("lakes");
    other = document.getElementById("other");

    irrigation.children[0].style.height = "0";
    lakes.children[0].style.height = "0";
    other.children[0].style.height = "0";

    /* Add click listeners that will trigger the accordion effect */
    irrigation.addEventListener("click", function() {irrigationmode = accordion(irrigation, irrigationmode, 2);});
    lakes.addEventListener("click", function() {lakesmode = accordion(lakes, lakesmode, 2);});
    other.addEventListener("click", function() {othermode = accordion(other, othermode, 4);});
}


function accordion(category, mode, subnum) {
    var change = 0;
    if (mode) {
        /* Close the accordion */
        category.children[0].style.height = "0";
        return 0;
    } else {
        /* Open the accordion */
        /* Close all categories first */
        if (irrigationmode == 1) {
            irrigation.children[0].style.height = "0";
            irrigationmode = 0;
            change = 1;
        }

        if (lakesmode == 1) {
            lakes.children[0].style.height = "0";
            lakesmode = 0;
            change = 1;
        }

        if (othermode == 1) {
            other.children[0].style.height = "0";
            othermode = 0;
            change = 1;
        }

        /* Open the category that was origionally clicked */

        if (change == 1) {
            setTimeout(function() {category.children[0].style.height = (subnum*1.325 + 0.2) + "em"}, 200);
        } else {
            category.children[0].style.height = (subnum*1.325 + 0.2) + "em";
        }
        return 1;
    }
}

